import Taro from "@tarojs/taro";
import * as React from "react";

const systemInfo = Taro.getSystemInfoSync();

type ContextContent = {
  deviceInfoState: Taro.getSystemInfoSync.Result;
  navBarBottom: number;
  setNavBarBottom: React.Dispatch<React.SetStateAction<number>>;
};
// @ts-ignore
const DeviceContext = React.createContext<ContextContent>();

function DeviceProvider({ children }) {
  const [deviceInfoState] = React.useState(systemInfo);
  const [navBarBottom, setNavBarBottom] = React.useState(0);
  const value = { deviceInfoState, navBarBottom, setNavBarBottom };
  return (
    <DeviceContext.Provider value={value}>{children}</DeviceContext.Provider>
  );
}

function useDeviceInfo() {
  const context = React.useContext(DeviceContext);
  if (context === undefined) {
    throw new Error("useCount must be used within a DeviceProvider");
  }
  return context;
}

export { DeviceProvider, useDeviceInfo };
